<!DOCTYPE html>	
<html>
	<head>
		<title>mirror</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="../css/NEHE.css" /> 

		<script src="../three-js/three.js" type="text/javascript"></script>
        <script src="../three-js/libs/Mirror.js" type="text/javascript"></script>
		<script src="../three-js/Detector.js" type="text/javascript"></script>
		<script src="../three-js/stats.js" type="text/javascript"></script>
		<script src="../gfx/OrbitControls-Touch-Ortho.js" type="text/javascript"></script>
        <script src="../gfx/gfx-scene.js" type="text/javascript"></script>
	</head>
	<body>	
		<script type="text/javascript">
            var groundMirror;
            var smallSphere;

			var gfxScene = new GFX.Scene( {
				cameraPos : [2, 4, 20],
				axesHeight:10,
				controls:true,
				displayStats:true });

			initializeDemo();
	
			animateScene();
	
	
			function initializeDemo() {

                var planeGeo = new THREE.PlaneBufferGeometry( 20, 20 );

                // MIRROR planes
                groundMirror = new THREE.Mirror( 100, 100,
                    {
						textureWidth: gfxScene.canvasWidth,
						textureHeight: gfxScene.canvasHeight,
						color: 0x505050
                    } );

                groundMirror.rotateX( -Math.PI / 2 );
                gfxScene.add( groundMirror );

                var sphereGeom = new THREE.SphereGeometry(1.5, 32, 32);
                var ballTexture = new THREE.ImageUtils.loadTexture("images/ball.png");
                var mat = new THREE.MeshLambertMaterial({ map:ballTexture });
                var mesh = new THREE.Mesh(sphereGeom, mat);
                mesh.position.y = 1.5;

                gfxScene.add(mesh);

                var texture = new THREE.ImageUtils.loadTexture("images/envwall.png");
                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set( 4, 4 );

                var planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { map: texture } ) );
                planeBack.position.z = -10;
                planeBack.position.y = 10;
                gfxScene.add( planeBack );

                var geometry = new THREE.IcosahedronGeometry( 0.5, 0 );
                var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, shading: THREE.FlatShading } );
                smallSphere = new THREE.Mesh( geometry, material );
                gfxScene.add(smallSphere);
 			}


			function animateScene() {
	
				requestAnimationFrame(animateScene);

                var timer = Date.now() * 0.01;

                smallSphere.position.set(
                    Math.cos( timer * 0.1 ) * 3,
                    Math.abs( Math.cos( timer * 0.2 ) ) * 2 + 0.5,
                    Math.sin( timer * 0.1 ) * 3
                );
                smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
                smallSphere.rotation.z = timer * 0.8;

				gfxScene.renderScene();
			}

		</script>

		<div style="position: absolute; top: 10px; left: 10px;color:white">
		<br/>
        </div>
	</body>
</html>